<template>
  <div class="content">
    <Menu />
    <WalletPopup />

    <Header />
    <Banner />
    <Notice />

    <section class="box">
      <p class="swiper-box">100</p>
    </section>

    <div class="presale-content">
      <div class="sale">
        <img src="../assets/imgs/sale.png" />
        <span>{{$t('meg.preSale')}}</span>
      </div>
      <Presale v-for="item in presales" :key="item.title" :data="item" @presaleEvent="presaleEvent"></Presale>
    </div>

    <div class="partners-content">
      <Partners v-for="item in partners" :key="item.title" :data="item"></Partners>
    </div>
    <!-- <section class="footer"></section> -->
  </div>
</template>

<script setup>
import Header from "../components/Header/index.vue"
import Menu from '../components/Menu/index.vue'
import Banner from '../components/Banner/index.vue'
import Notice from "../components/Notice/index.vue"
import Presale from '../components/Presale/index.vue'
import Partners from '../components/Partners/index.vue'
import { reactive } from 'vue'
import { showToast } from 'vant';

const presales = reactive([
  {
    price: 'USDT',
    amount: '',
  },
  {
    price: 'OMNI',
    amount: '',
  },
  {
    price: 'USDT',
    amount: '',
  },
  {
    price: 'OMNI',
    amount: '',
  }
])

const partners = reactive([
  {
    title: 'github',
    link: 'https://github.com/',
    img: new URL('../assets/imgs/NFT_1.png', import.meta.url).href
  },
  {
    title: 'github',
    link: 'https://github.com/',
    img: new URL('../assets/imgs/NFT_1.png', import.meta.url).href
  },
])

const presaleEvent = () => {
  showToast('通道未开放');
}

</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 0 0 1rem;
  .box {
    position: relative;
  }
  .swiper-box {
    padding: 0.625rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .presale-content {
    margin: 0 0.9375rem 0.9375rem;
    padding: 0 0.5rem;
    border: 1px solid rgb(68, 78, 104);
    background: linear-gradient(rgba(71, 71, 107, 0.8) 0%, rgba(50, 55, 75, 0.8) 33.81%, rgba(1, 1, 1, 0.8) 71.33%);
    border-radius: 1rem;
    position: relative;
    .presale {
      margin: 1rem 0;
    }
    .sale {
      padding: 1rem 0 0rem;
      img {
        vertical-align: middle;
        width: 2rem;
      }
      span {
        vertical-align: middle;
        font-size: 1rem;
        margin-left: 0.6rem;
      }
    }
  }
  .partners-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 0 0.9375rem 0.9375rem;
  }
}
</style>